<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/wk3un4/houtai/lib/layui/css/layui.css" />
<script type="text/javascript" src="/wk3un4/houtai/lib/layui/layui.js"></script>
</head>

<body>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>材料</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="cailiao" id="cailiao"
					required lay-verify="required" placeholder="请输入材料"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>包装:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="baozhuang" required
					lay-verify="required" placeholder="请输入包装" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>花语:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="huayu" required
					lay-verify="required" placeholder="请输入花语" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>配送:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="peisong" required
					lay-verify="required" placeholder="请输入配送" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>品牌:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="brand" required
					lay-verify="required" placeholder="请输入品牌" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>是否定制:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="dingZhi" required
					lay-verify="required" placeholder="yes/no" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>型号:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="bianhao" required
					lay-verify="required" placeholder="请输入型号" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>颜色:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="color" required
					lay-verify="required" placeholder="请输入颜色" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>元素:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="yuansu" required
					lay-verify="required" placeholder="请输入元素" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>所属分类:</label>
			<div class="layui-input-inline" style="width: 350px;">
				<select name="productTypeId">
					<c:forEach items="${types}" var="t">
						<option value="${t.id}">${t.typeName}</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>图片地址:</label>
			<div class="layui-input-inline">
			<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>
			<img id="imgFace" style="width:120px;" src="" />
			<input style="width: 350px;" type="hidden" id="picUrl" name="picUrl" class="layui-input">
		</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>是否显示:</label>
			<div class="layui-input-block">
				<input type="radio" name="homeFlag" value="是" title="是"> <input
					type="radio" name="homeFlag" value="否" title="否" checked>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"><span style="color: red;">*</span>商品名称:</label>
			<div class="layui-input-inline">
				<input style="width: 350px;" type="text" name="name" required
					lay-verify="required" placeholder="请输入商品名称" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<script>
	layui.use(['form','upload'], function() {
		var form = layui.form;
		var $ = layui.jquery; //引入jquery
		var upload = layui.upload;
		//执行实例
		var uploadInst = upload.render({
			elem : '#test1' //绑定元素
			,
			url : '/wk3un4/ProductListZsgServlet?method=upload' //上传接口
			,
			done : function(res) {
				//上传完毕回调
				console.log(res);
				$("#picUrl").val('upload/'+res.data);
				$("#imgFace").attr('src','/wk3un4/upload/'+res.data);
			},
			error : function() {
				//请求异常回调
			}
		});
			//监听提交
			form.on('submit(formDemo)', function(data) {
				//8ee9f6a8-d4a8-446e-930e-50af1528251c
				var d = data.field; //表单中的数据，定义一个参数来接收
				d.method = "add";//执行方法
				//通过ajax想数据库提交数据
				console.log(d); //提交之前的一个数据验证，通过打印的方式判断一下这个数据
				var url = '/wk3un4/ProductListZsgServlet';
				//    				ajax请求
				$.post(url, d, function(data) {
					if (data.count > 0) {
						console.log('添加成功');
						var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
						parent.layer.close(index); //关闭窗口
					}
				}, "json");
				return false;
			});
		});
	</script>
</body>

</html>